/**
 * @author lovebing
 */

import React, {
  Component,
  PropTypes
} from 'react';

import {
  MapView,
  MapTypes,
  Geolocation
} from 'react-native-baidu-map';


import {
  StyleSheet,
  View,
} from 'react-native';

import Dimensions from 'Dimensions';

export default class BaiduMap extends Component {

  constructor() {
    super();

    this.state = {
      mayType: MapTypes.NORMAL,
      zoom: 15,
      trafficEnabled: false,
      baiduHeatMapEnabled: false,

    };
  }

    componentDidMount() { // 获取位置
        Geolocation.getCurrentPosition().then(
            (data) => {
                this.setState({
                    zoom:16,
                    marker:{
                        latitude:data.latitude,
                        longitude:data.longitude,
                        title:'我的位置'
                    },
                    center:{
                        latitude:data.latitude,
                        longitude:data.longitude,
                    }
                })
            }
        ).catch(error => {
            console.warn(error,'error')
        })
        //jiekou
        // (data)=>{
        //     var arr = [];
        //     for(var i = 0;i<arr.length;i++){
        //       let item = arr[i];
        //         arr.push({
        //             latitude:item.latitude,
        //             longitude:item.longitude,
        //             title:item.title
        //         })
        //     }
        //     this.setState({
        //         markers:arr
        //     })
        // }

    }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          trafficEnabled={this.state.trafficEnabled}
          baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}
          zoom={this.state.zoom}
          mapType={this.state.mapType}
          center={this.state.center}
          marker={this.state.marker}
          markers={this.state.markers}
          style={styles.map}
          onMarkerClick={(e) => {
            console.warn(JSON.stringify(e));
          }}
          onMapClick={(e) => {
          }}
        >
        </MapView>






      </View>
    );
  }
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    marginBottom: 16
  }
});
